import Taro from '@tarojs/taro-h5';
import { Component } from "@tarojs/taro-h5";
import Nerv from "nervjs";
import { Image, Text, View } from "@tarojs/components";
import classNames from 'classnames';
import './Grid.scss';
class Grid extends Component {
  render() {
    const { data, columnNum, bold, iconSize, fontSize } = this.props;
    const width = 750 / columnNum;
    const imageSize = Taro.pxTransform(width * (iconSize || 0.3));
    return <View className={classNames('o-grid', this.props.className)}>
                {data && data.map((item, index) => {
        return <View key={index} className="o-grid-item" style={{ width: Taro.pxTransform(width) }}>
                        <Image className="icon" src={item.image} mode="aspectFill" style={{ width: imageSize, height: imageSize }} />
                        <Text className={classNames('name text-default mt-5', { 'bold': bold })} style={{ fontSize: Taro.pxTransform(fontSize || 26) }}>{item.value}</Text>
                    </View>;
      })}
            </View>;
  }
}
export default Grid;